<template>
    <!-- 对话框表单 -->
    <!-- 建议使用 Prettier 格式化代码 -->
    <!-- el-form 内可以混用 el-form-item、FormItem、ba-input 等输入组件 -->
    <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="baTable.form.operate! == 'detail'"
        @close="baTable.toggleForm"
        width="60%"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                订单详情
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div
                class="ba-operate-form"
                :class="'ba-' + baTable.form.operate + '-form'"
                :style="config.layout.shrink ? '':'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
            >
                <div class="info-content">
                    <el-row>
                        <el-col :span="16">
                            <el-row>
                                <el-col :span="12">
                                    <div class="info-item">
                                        <div class="label">{{ t('order.user_id') }}</div>
                                        <div class="value">{{baTable.form.items!.user.nickname}}</div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="info-item">
                                        <div class="label">{{t('order.no')}}</div>
                                        <div class="value">{{baTable.form.items!.no}}</div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <div class="info-item">
                                        <div class="label">{{t('order.product_no')}}</div>
                                        <div class="value">{{baTable.form.items!.product_no}}</div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="info-item">
                                        <div class="label">{{ t('order.num') }}</div>
                                        <div class="value">{{baTable.form.items!.num}}</div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <div class="info-item">
                                        <div class="label">{{ t('order.product_category_id') }}</div>
                                        <div class="value">{{ baTable.form.items!.productCategory ? baTable.form.items!.productCategory.title : ""}}</div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="info-item">
                                        <div class="label">生产状态</div>
                                        <div class="value">{{ baTable.form.items!.step_label }}</div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <div class="info-item">
                                        <div class="label">{{ t('order.img_position') }}</div>
                                        <div class="value">{{baTable.form.items!.img_position}}</div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <div class="info-item">
                                        <div class="label">{{ t('order.color_remark') }}</div>
                                        <div class="value">{{baTable.form.items!.color_remark}}</div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <div class="info-item">
                                        <div class="label">{{ t('order.tips') }}</div>
                                        <div class="value">{{baTable.form.items!.tips}}</div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <div class="info-item">
                                        <div class="label">{{ t('order.images') }}</div>
                                        <div class="value">
                                            <div class="images-item">
                                                <template v-for="item,index in baTable.form.items!.images">
                                                    <el-image style="width: 100px; height: 100px" :src="item" :preview-src-list="baTable.form.items!.images" :initial-index="index" fit="cover"/>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <div class="info-item">
                                        <div class="label">{{ t('order.remark') }}</div>
                                        <div class="value">{{baTable.form.items!.remark}}</div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <div class="info-item">
                                        <div class="label">{{ t('order.size') }}</div>
                                        <div class="value">{{baTable.form.items!.size}}</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="8">
                            <el-scrollbar style="height: calc(60vh - 100px);">
                                <el-timeline style="max-width: 600px">
                                    <el-timeline-item
                                    v-for="(item, index) in logs"
                                    :key="index"
                                    :timestamp="item.create_time"
                                    >
                                    <div class="timeline-content">
                                        <div class="title">【{{item.step_label}}】<span v-if="item.num">【数量:{{item.num}}】</span>{{ item.staff ? item.staff.name : ""}}</div>
                                        <div>{{ item.desc }}</div>
                                        <div class="images-item" v-if="item.images.length > 0">
                                            <template v-for="val,i in item.images">
                                                <el-image style="width: 80px; height: 80px" :src="val" :preview-src-list="item.images" :initial-index="i" fit="cover"/>
                                            </template>
                                        </div>
                                    </div>
                                    </el-timeline-item>
                                </el-timeline>
                            </el-scrollbar>
                        </el-col>
                    </el-row>
                    <!-- <el-row>
                        <el-col :span="24">
                            <div class="info-item">
                                <div class="label">{{ t('order.files') }}</div>
                                <div class="value">
                                    <div class="images-item">
                                        <template v-for="item,index in baTable.form.items!.files">
                                            <el-image style="width: 100px; height: 100px" :src="item" :preview-src-list="baTable.form.items!.images" :initial-index="index" fit="cover"/>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row> -->
                </div>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.toggleForm()">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormItemRule } from 'element-plus'
import { inject, onMounted, reactive, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import BaUpload from '/@/components/baInput/components/baUpload.vue'
import { useConfig } from '/@/stores/config'
import type baTableClass from '/@/utils/baTable'
import { buildValidatorData } from '/@/utils/validate'
import { timeFormat } from '/@/utils/common'

const config = useConfig()
const formRef = ref<FormInstance>()
const baTable = inject('baTable') as baTableClass
const fileUrl = import.meta.env.VITE_IMG_BASE_PATH
const { t } = useI18n()
let logs = reactive([])

watch(() => {
    return baTable.form.items!
},function(val){
    let temps = val.logs.reverse()
    logs.length = 0
    temps.forEach((item) => {
        let images = []
        item.create_time = timeFormat(item.create_time, 'yyyy-mm-dd hh:MM:ss')
        item.images.forEach(img => {
            if(img.indexOf('http') == -1) {
                    images.push(fileUrl+img);
                } else {
                    images.push(img);
                }
        })
        item.images = images
        logs.push(item)
    })
    console.log('watch', logs)
})

onMounted(() => {
    if(baTable.form.items!.logs){
        let temps = baTable.form.items!.logs.reverse()
        logs.length = 0
        temps.forEach((item) => {
            let images = []
            item.create_time = timeFormat(item.create_time, 'yyyy-mm-dd hh:MM:ss')
            item.images.forEach(img => {
                if(img.indexOf('http') == -1) {
                    images.push(fileUrl+img);
                } else {
                    images.push(img);
                }
            })
            item.images = images
            logs.push(item)
        })
        console.log('onMounted', logs)
    }
})

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    no: [buildValidatorData({ name: 'required', title: t('order.no') })],
    num: [buildValidatorData({ name: 'number', title: t('order.num') }), buildValidatorData({ name: 'required', title: t('order.num') })],
})
</script>

<style scoped lang="scss">
    .info-item {
        display: flex; justify-content: flex-start; padding: 5px 0;
        .label {
            padding-right: 10px;
            width: 120px;
            text-align: right;
            font-weight: 700;
            &::after{
                content: "：";
            }
        }
        .value {
            color: #606266;
        }
    }
    .images-item {
        .el-image { margin-right: 10px; }
    }
</style>
